// 导入vue构造函数
import Vue from 'vue'
// 导入vuex构造函数
import Vuex from 'vuex'

// 导入全局getters
import getters from './getters'

// 导入子模块
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import route from './modules/route'
import tagsView from './modules/tagsView'

// 导入让vuex持久化的插件
import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 注册子模块
  modules: {
    app,
    settings,
    user,
    route,
    tagsView
  },
  getters,
  plugins: [
    // 使用让vuex持久化的插件，传入配置
    // 插件的好处：
    // 1.自动把vuex的数据同步到localstorage一份
    // 2.当刷新页面的时候会自动把localstorage数据同步到vuex中
    // 3.当vuex中的数据发生变化了，也会自动的把最新数据同步到localstorage中
    // 数据的使用方式：
    // 1.代码中我们都是从vuex中对数据做增删改查(只用vuex中的数据)
    // 2.localstorag只负责刷新数据不丢失的任务
    createPersistedstate({
      // 本地存储键名
      key: 'hmhr',
      // 哪些模块下的数据需要持久化
      paths: ['app', 'settings']
    })
  ]
})

// token为什么用vuex和localstorag本地存储共同管理呢？
// 答案：响应式、读写速度快、数据持久化

// 存储在vuex中数据的优点：1.响应式。2.读取速度快。
// 缺点：1.刷新会丢失(数据不持久化)
// 存储在localstorag中数据的优点：1.数据持久化
// 缺点：1.非响应式。2.读写速度慢(从磁盘中读写，操作文件慢)

export default store
